<template>
  <div id="app">
    <router-view/>
    <div class='modal' v-if="loading">
      <span class="loading"></span>
      <span class="text">正在加载...</span>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data () {
    return {

    }
  },
  computed : {
    ...mapState([
      "loading"
    ]),
  }
}
</script>
<style lang="scss">
	#app {
	  font-family: Avenir, Helvetica, Arial, sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  text-align: center;
	  color: #2c3e50;
	  width: 100%;
	  height: 100%;
	}
  .text {
    font-size: 14px;
    color: white;
    position: absolute;
    left: 53%;
    top: 55%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
  }
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    height: 100%;
    width: 100%;
  }
  .loading{
      display: inline-block;
      height: 50px;
      width: 50px;
      border-radius: 100%;
      border: 2px solid white;
      border-bottom-color: transparent;
      position: absolute;
      left: 45%;
      top: 45%;
      transform: translate(-40%,-40%);
      -webkit-transform: translate(-50%,-50%);
      -webkit-animation: rotate 0.75s linear infinite;
      animation: rotate 0.75s linear infinite;
  }
    @-webkit-keyframes rotate {
      0% {
          -webkit-transform: rotate(0deg);
      }
      50% {
          -webkit-transform: rotate(180deg);
      }
      100% {
          -webkit-transform: rotate(360deg);
      }
    }
    @keyframes rotate {
      0% {
          transform: rotate(0deg);
      }
      50% {
          transform: rotate(180deg);
      }
      100% {
          transform: rotate(360deg);
      }
    }
</style>
